<template>
  <view class="custom-reply-container">
    <!-- 是否自定义回复语开关 -->
    <view class="switch-container">
      <view class="switch-content">
		  <text>自定义回复语</text>
		  <custom-switch :checked="isCustomReply" @change="toggleCustomReply" />
	  </view>
	  <text>移入不合适时自动向对方发送回复语</text>
    </view>

    <!-- 默认回复语 -->
    <view class="default-reply" v-if="!isCustomReply">
      <text class="reply-text">{{ defaultReply }}</text>
    </view>

    <!-- 自定义回复语列表 -->
    <view class="custom-reply-list" v-else>
      <view
        class="reply-item"
        v-for="(reply, index) in customReplies"
        :key="index"
      >
	   <image
			:src="reply.checked ? '/static/img/checked.svg' : '/static/img/unchecked.svg'"
			class="checkbox-icon"
			mode="aspectFit"
			 @click="selectReply(reply)" 
		  />
       <!-- <image
          :value="reply.id"
          :checked="reply.checked"
          @click="selectReply(reply)"
        /> -->
        <text class="reply-text">{{ reply.text }}</text>
      </view>

      <!-- 添加自定义回复语按钮 -->
      <view class="add-reply-button" @click="addCustomReply">
        <uni-icons type="plus" size="24" color="#007AFF"></uni-icons>
        <text>添加自定义回复语</text>
      </view>
    </view>
  </view>
</template>

<script>
	import CustomSwitch from '@/components/CustomSwitch.vue'; // 引入自定义 switch 组件
export default {
	components: {
	    CustomSwitch
	  },
  data() {
    return {
      isCustomReply: false, // 是否自定义回复语
	   defaultReply: '感谢您的应聘，但很遗憾，您的简历和该职位的需求不完全一致。祝您在直聘早日找到理想的工作。', // 默认回复语
      customReplies: [
        {
          id: 1,
          text: '感谢您的应聘，但很遗憾，您的简历和该职位的需求不完全一致。祝您在直聘早日找到理想的工作。',
          checked: false
        },
        {
          id: 2,
          text: '您的简历已进入我们的人才库，如有合适职位会第一时间联系您。',
          checked: false
        }
      ] // 自定义回复语列表
    };
  },
  methods: {
    // 切换是否自定义回复语
    toggleCustomReply(e) {
      this.isCustomReply = e.detail.value;
    },
    // 选择回复语
      selectReply(reply) {
        if (this.isCustomReply) {
          // 自定义回复语：更新选中状态
          this.customReplies = this.customReplies.map(item => {
            if (item.id === reply.id) {
              return { ...item, checked: !item.checked }; // 切换选中状态
            } else {
              return { ...item, checked: false }; // 确保每次只能选中一个
            }
          });
    
            // 将选中的回复语传回至上一页面
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('updateRejectReply', {
              content: reply.text
            });
    
            // 返回上一页面
            uni.navigateBack();
          } else {
            // 不自定义时，直接传回默认回复语
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('updateRejectReply', {
              content: this.defaultReply
            });
    
            // 返回上一页面
            uni.navigateBack();
          }
        },
        // 添加自定义回复语
        addCustomReply() {
           uni.navigateTo({
                url: '/pages/enterprise/add-reject-reply',
                success: (res) => {
                  // 监听添加页面的返回数据
                  res.eventChannel.on('addCustomReply', (data) => {
                    if (data.content && data.content.trim() !== '') {
                      // 检查是否已存在相同内容
                      const isExist = this.customReplies.some(
                        (item) => item.text === data.content
                      );
                      if (!isExist) {
                        this.customReplies.push({
                          id: this.customReplies.length + 1,
                          text: data.content,
                          checked: false
                        });
                      } else {
                        uni.showToast({
                          title: '回复语已存在',
                          icon: 'none'
                        });
                      }
                    }
                  });
                },
                fail: (err) => {
                  console.error('页面跳转失败:', err);
                  uni.showToast({
                    title: '页面跳转失败，请重试',
                    icon: 'none'
                  });
                }
      });
    }
  }
};
</script>
<style scoped>
.custom-reply-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20rpx;
  background-color: #f5f5f5;
}

.switch-container {
  display: block;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;
}

.switch-content{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 强制覆盖 switch 组件的选中颜色 */
switch .wx-switch-input.wx-switch-input-checked {
  background-color: #13227A !important;
  border-color: #13227A !important;
}

.default-reply {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 20rpx;
  border-radius: 10rpx;
}

.reply-text {
  font-size: 28rpx;
  color: #333;
}

.custom-reply-list {
  flex: 1;
  padding: 20rpx;
  background-color: #fff;
  margin-top: 20rpx;
  border-radius: 10rpx;
  overflow-y: auto;
}

.reply-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.reply-item:last-child {
  border-bottom: none;
}

.checkbox-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.reply-text {
  flex: 1;
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.add-reply-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.add-reply-button text {
  font-size: 28rpx;
  color: #007AFF;
  margin-left: 10rpx;
}
</style>